<template>
  <div class="page-container page-footer-btn">
<!--    <van-field-->
<!--        readonly-->
<!--        clickable-->
<!--        label="科室"-->
<!--        :value="value"-->
<!--        placeholder="请选择科室"-->
<!--        @click="showPicker = true"-->
<!--      />-->
<!--      <van-popup v-model="showPicker" round position="bottom">-->
<!--        <van-picker-->
<!--          show-toolbar-->
<!--          :columns="columns"-->
<!--          @cancel="showPicker = false"-->
<!--          @confirm="onConfirm"-->
<!--        />-->
<!--      </van-popup>-->
    <van-row>
      <van-col span="8" class="check">
        <van-checkbox class="checkbox-small"  v-model="filterGys" ref="checkbox" shape="square"  @change="filterGysChange()" >是供应室</van-checkbox>
      </van-col>
      <van-col span="16">
        <van-field is-link @click="showPopup" placeholder="请选择科室" label="科室" :value="value"></van-field>
      </van-col>
    </van-row>
    <van-popup v-model="show" position="right" class="popup">
      <van-search v-model="value" placeholder="请输入关键词" shape="round"  background="#1989fa" @input="dpfilter" />
      <van-checkbox-group>
        <van-cell-group>
          <van-cell
            v-for="(item, index) in searchedList"
            clickable
            :key="item.id"
            :title="item.addressName==null?item.name:item.name+'-/-'+item.addressName"
            @click="dpCheck(item, index)"
          >
          </van-cell>
        </van-cell-group>
      </van-checkbox-group>
    </van-popup>
    <van-row>
      <van-col span="24">
        <FortenList ref="listItem" :propAutoFetchData = 'false'></FortenList>
      </van-col>
    </van-row>
    <van-row type="flex" justify="space-around" class="footer-btn">
      <van-col span="7">
        <van-button type="primary" @click="handlePick" block>
          拣货
        </van-button>
      </van-col>
      <van-col span="7">
        <van-button type="danger" @click="handleGoBack" block>
          取消
        </van-button>
      </van-col>
    </van-row>
 <!--   <van-cell-group>
      <van-checkbox-group v-model="result" ref="checkboxGroup">
        <van-cell-group >
          <van-cell
            style="border-top:0.5px solid  #ccc;"
            v-for="(item, index) in list"
            :key="index"
            currency=""
            @click="toggle(item, index)"
          >
            <template #title>
              <van-row>
                <van-col span="2">
                  <van-checkbox :name="item" ref="checkboxes" shape="square" :disabled="item.skuQtyStock == 0"/>
                </van-col>
                <van-col span="4">品名：</van-col>
                <van-col span="18">{{item.matrName}}</van-col>
              </van-row>
              <van-row type="flex" justify="end">
                <van-col span="22">品规：{{item.matrSpec}}</van-col>
              </van-row>
              <van-row type="flex" justify="end">
                <van-col span="10">单位：{{item.requiredUnit}}</van-col>
                <van-col span="12">数量：{{item.skuQtyApply}}</van-col>
              </van-row>
              <van-row type="flex" justify="end">
                <van-col span="10" :style="{color: item.skuQtyStock == 0 ? 'red' : item.skuQtyStock < item.skuQtyApply ? 'Orange' : 'green'}">库存数量：{{item.skuQtyStock}}</van-col>
                <van-col span="12">请领人：{{item.creator}}</van-col>
              </van-row>
              <van-row type="flex" justify="end">
                <van-col span="22">请领时间：{{item.gmtApply}}</van-col>
              </van-row>
            </template>
          </van-cell>
        </van-cell-group>
      </van-checkbox-group>
      <van-row type="flex" justify="space-around" class="footer-btn">
        <van-col span="7">
          <van-button type="primary" @click="handlePick" block>
            拣货
          </van-button>
        </van-col>
        <van-col span="7">
          <van-button type="danger" @click="handleGoBack" block>
            取消
          </van-button>
        </van-col>
      </van-row>
    </van-cell-group>-->


</div>
</template>
<script>
import { Toast, Popup } from 'vant'
import Vue from 'vue'

Vue.use(Popup)

export default {
  data() {
    return {
      value: '',
      a: false,
      show: false,
      allowChecks: [],
      columns: [],
      list: [],
      result: [],
      searchedList: [],
      deptId: '',
      stockStyle: '',
      depts: [],
      filterGys: false,
      selectDeptId: null,
    }
  },
  props: {
  },
  created() {
    this.getDept()
  },
  computed: {
  },
  methods: {
    showPopup() {
      this.utils.loadShow()
      this.getDept()
      this.show = true
    },
    filterGysChange() {
      this.getDept()
      this.loadItem()
    },
    getDept() {
      let wrapper = this.$newWrapper().eq('flagTransfer', false)
        .isNull('refId').isNotNull('ref_apply_item_id')
        .eq('flagGys', this.filterGys)
      this.$ajax.get('/dept/apply_auto/autoTransferDeptList', {
        params: {
          queryString: JSON.stringify(wrapper.queryConditions)
        }
      }).then(response => {
        if (response.code == 0) {
          this.depts = response.data
          this.searchedList = response.data
          this.columns = response.data.map(o => o.name)
        }
        this.utils.loadHide()
      })
    },
    loadItem(deptId) {
      if (!this.selectDeptId) {
        return
      }
      let wrapper = this.$newWrapper().eq('flagTransfer', false)
        .eq('deptId', this.selectDeptId).isNull('refId')
        .isNotNull('ref_apply_item_id')
        .eq('flagGys', this.filterGys)
      this.$refs.listItem.tablePage.pageSize = 100
      this.$refs.listItem.setQueryWrapper(wrapper)
      // this.$ajax.get('/dept/apply_auto/list', {
      //   params: {
      //     queryString: JSON.stringify(wrapper.queryConditions)
      //   }
      // }).then(response => {
      //   if (response.code == 0) {
      //     this.list = response.data.filter(o => o.refId == null)
      //   }
      // })
    },
    dpfilter() {
      this.searchedList = this.depts.filter(item => item.name.indexOf(this.value) > -1
          || this.pyutils.chineseToPinYin(item.name).indexOf(this.value) > -1)
    },
    dpCheck(item, index) {
      if (this.deptId == item.id) {
        this.show = false
        return
      }
      this.selectDeptId = item.id
      this.reCheck(item)
    },
    reCheck(item) {
      this.value = item.name
      this.show = false
      this.deptId = item.id
      this.loadItem(this.deptId)
    },
    onChange(picker, value, index) {
      Toast(`当前值：${value}, 当前索引：${index}`)
    },
    onCancel() {
      Toast('取消')
    },
    toggle(item, index) {
      if (item.skuQtyStock == 0) {
        return
      }
      this.$refs.checkboxes[index].toggle()
      if (this.allowChecks.length == this.result.length) {
        this.a = false
      }
    },
    handleGoBack() {
      this.$router.go(-1)
      /* this.$router.push({name: 'dist/dist-pick'}) */
    },
    handlePick() {
      let applyAutos = this.$refs.listItem.getChecks()
      // let applyAutos = this.result.filter(o => o.refId == null)
      // if (applyAutos instanceof Array) {
      //   if (applyAutos.length === 0) {
      //     this.$notify.warning('请先选择调拨明细')
      //     return false
      //   }
      // }
      if (applyAutos.length < 1) {
        this.$notify.warning('请先选择调拨明细')
        return
      }
      this.autoRespond(applyAutos)
    },
    toggleAllItem() {
      this.allowChecks = this.list.filter(o => o.skuQtyStock > 0)
      let allowChecks = this.allowChecks
      if (this.a == true) {
        // eslint-disable-next-line no-plusplus
        for (let i = 0; i < allowChecks.length; i++) {
          this.$refs.checkboxes[i].toggle(false)
        }
        this.a = false
      } else {
        // eslint-disable-next-line no-plusplus
        for (let i = 0; i < allowChecks.length; i++) {
          this.$refs.checkboxes[i].toggle(true)
        }
        this.a = true
      }
    },
    autoRespond(applyAutos) {
      const params = {
        targetStatus: '1',
        applyAutos
      }
      let that = this
      this.$ajax.post('/dept/apply_auto/toDistPDA', params).then(resp => {
        if (resp.code == 0) {
          // 跳转页面
          this.$router.push({name: 'dPick', params: {dist: resp.data}})
        }
      })
    },
  }
}
</script>
<style lang="scss" scoped>
  .popup {
    width: 80%;
    height: 100%;
  }
  .check{
    height: 44px;
  }
  .check  > .van-cell{
    height: 44px;
  }

</style>
